<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import '/public/static/map/js/china.js'
import { type ECharts, init } from 'echarts'
import type { Map } from '@/types/eCommerce'
import type { City, CityPortion } from '@/types/components-echarts'

const props = defineProps<{
  mapData: Map[]
}>()

const echarts_ref = ref<HTMLDivElement>()
let myEcharts: ECharts


const getCityPortion = (queryCity: string) => {
  const city: City = {
    name: [
      '北京', '上海', '天津', '重庆', '河北', '山西', '辽宁', '吉林', '黑龙江', '浙江',
      '福建', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南',
      '江西', '陕西', '青海', '甘肃', '广西', '新疆', '内蒙古', '西藏', '宁夏', '台湾',
      '香港', '澳门', '安徽', '江苏'
    ],
    value: [
      ['116.3979471', '39.9081726'], ['121.4692688', '31.2381763'], ['117.2523808', '39.1038561'], ['106.548425', '29.5549144'],
      ['114.4897766', '38.0451279'], ['112.5223053', '37.8357424'], ['123.4116821', '41.7966156'], ['125.3154297', '43.8925629'],
      ['126.6433411', '45.7414932'], ['120.1592484', '30.265995'], ['119.2978134', '26.0785904'], ['117.0056', '36.6670723'],
      ['113.6500473', '34.7570343'], ['114.2919388', '30.5675144'], ['112.9812698', '28.2008247'], ['113.2614288', '23.1189117'],
      ['110.3465118', '20.0317936'], ['104.0817566', '30.6610565'], ['106.7113724', '26.5768738'], ['102.704567', '25.0438442'],
      ['115.8999176', '28.6759911'], ['108.949028', '34.2616844'], ['101.7874527', '36.6094475'], ['103.7500534', '36.0680389'],
      ['108.3117676', '22.8065434'], ['87.6061172', '43.7909393'], ['111.6632996', '40.8209419'], ['91.1320496', '29.657589'],
      ['106.2719421', '38.4680099'], ['120.9581316', '23.8516062'], ['114.139452', '22.391577'], ['113.5678411', '22.167654'],
      ['117.2757034', '31.8632545'], ['118.7727814', '32.0476151']
    ]
  }
  let data
  const queryCityLength = queryCity.length
  for (let i = 0; i <= city.name.length; i++) {
    if (queryCityLength === 2) {
      data = query(city.name[i], queryCity, city.value[i])
    }
    if (queryCity.charAt(queryCityLength - 1) === '省') {
      let newCity: string = ''
      for (let i = 0; i < queryCityLength - 1; i++) {
        newCity = newCity + queryCity.charAt(i)
      }
      data = query(city.name[i], newCity, city.value[i])
    }
    if (queryCityLength > 3) {
      if (queryCity.includes(city.name[i])) {
        return {
          name: city.name[i],
          value: city.value[i]
        }
      }
    }
    if (data) {
      return data
    }
  }
}


const query = (city: string, queryCity: string, value: string[]): CityPortion | null => {
  if (city === queryCity) {
    return {
      name: queryCity,
      value: value
    }
  }
  return null
}

const initEcharts = () => {
  const initOption = {
    backgroundColor: 'transparent', // 设置背景色透明
    // 必须设置
    tooltip: {
      show: false
    },
    geo: {
      map: 'china',
      // 这里必须定义，不然后面series里面不生效
      tooltip: {
        show: false
      },
      label: {
        show: false
      },
      zoom: 1.03,
      silent: true, // 不响应鼠标时间
      show: true,
      roam: false, // 地图缩放和平移
      aspectScale: 0.75, // scale 地图的长宽比
      itemStyle: {
        borderColor: '#0FA3F0',
        borderWidth: 1,
        areaColor: '#070f71',
        shadowColor: 'rgba(1,34,73,0.48)',
        shadowBlur: 10,
        shadowOffsetX: -10,
        shadowOffsetY: 10
      },
      select: {
        disabled: true
      },
      emphasis: {
        disabled: true,
        areaColor: '#00F1FF'
      },
      top: '10%',
      left: 'center',
      // 去除南海诸岛阴影 series map里面没有此属性
      regions: [{
        name: '南海诸岛',
        selected: false,
        emphasis: {
          disabled: true
        },
        itemStyle: {
          areaColor: '#00000000',
          borderColor: '#00000000'
        }
      }],
      z: 1
    },
    series: [
      // 地图配置
      {
        type: 'map',
        map: 'china',
        zoom: 1,
        tooltip: {
          show: false
        },
        label: {
          show: true, // 显示省份名称
          color: '#ffffff',
          align: 'center'
        },
        top: '10%',
        left: 'center',
        aspectScale: 0.75,
        roam: false, // 地图缩放和平移
        itemStyle: {
          borderColor: '#3ad6ff', // 省分界线颜色  阴影效果的
          borderWidth: 1,
          areaColor: '#17348b',
          opacity: 1
        },
        // 去除选中状态
        select: {
          disabled: true
        },
        // 控制鼠标悬浮上去的效果
        emphasis: { // 聚焦后颜色
          disabled: false, // 开启高亮
          label: {
            align: 'center',
            color: '#ffffff'
          },
          itemStyle: {
            color: '#ffffff',
            areaColor: '#0075f4'// 阴影效果 鼠标移动上去的颜色
          }
        },
        z: 2
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: [50, 50],
        itemStyle: {
          color: '#e30707'
        },
        z: 2
      }
    ]
  }
  myEcharts = init(echarts_ref.value as HTMLDivElement)
  myEcharts.setOption(initOption)
}

const dataEcharts = () => {
  const data = props.mapData.map(item => {
    const city = getCityPortion(item.name)
    city!.value.push(item.value)
    return {
      name: city!.name,
      value: city!.value
    }
  })
  const dataPosition = {
    series: [{
      type: 'map',
      data: data
    }, {
      label: {
        show: true,
        color: '#fff',
        formatter(value: any) {
          return value.data.value[2]
        }
      },
      type: 'scatter',
      data: data
    }]
  }
  myEcharts.setOption(dataPosition)
}
const adapterEcharts = () => {
  const width = echarts_ref.value!.offsetWidth
  const adapterOption = {
    title: {
      textStyle: {
        fontSize: width / 100 * 2.5
      }
    },
    series: [{
      barWidth: width / 100 * 5
    }]
  }
  myEcharts.setOption(adapterOption)
  myEcharts.resize()
}

const loading = ref(true)
watch(props, () => {
  dataEcharts()
  setTimeout(() => {
    loading.value = false
  }, 300)
})

onMounted(() => {
  initEcharts()
  window.addEventListener('resize', adapterEcharts)
})

onUnmounted(() => {
  window.removeEventListener('resize', adapterEcharts)
})
</script>
<template>
  <div class="echarts" v-loading="loading">
    <div ref="echarts_ref" class='echartsDom'>
    </div>
  </div>
</template>

<style scoped>
@import "@/assets/style/componentsEcharts.css";
</style>